<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>题库管理</title>
    <#-- 使用相对当前模板文件的路径 再去找另一个模板文件 -->
    <#include "/common/link.ftl">

</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl">
    <!--定义一个变量  用于菜单回显-->
    <#assign currentMenu="question"/>

    <#include "/common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>题库管理</h1>
        </section>
        <section class="content">
            <div class="box">
                <!--高级查询--->
                <form class="form-inline" id="searchForm" action="/question/list" method="post">
                    <input type="hidden" name="currentPage" id="currentPage" value="1">
                    <a href="javascript:void(0);" class="btn btn-success btn-input btn-insert" style="margin: 10px">
                        <span class="glyphicon glyphicon-plus"></span> 添加
                    </a>
                    <a href="javascript:void(0);" class="btn btn-warning btn-output" >
                        <span class="glyphicon glyphicon-upload"></span> 批量导出试题
                    </a>
                    <a href="javascript:void(0);" class="btn btn-warning btn-import">
                        <span class="glyphicon glyphicon-download"></span> 批量导入试题
                    </a>
                </form>
                <!--编写内容-->
                <div class="box-body table-responsive ">
                    <table class="table table-hover table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>题目</th>
                            <th>类型</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <#list pageInfo.list as q>
                            <tr>
                                <td>${q.id}</td>
                                <td width="750px">${q.title}</td>
                                <td>${q.typeName}</td>
                                <td>
                                    <a href="javascript:void(0);"
                                       class="btn btn-success btn-xs btn-show" data-json='${q}'>
                                        <span class="glyphicon glyphicon-phone-alt"></span> 查看</a>
                                    <a href="javascript:void(0);" class="btn btn-info btn-xs btn-input btn-update" data-json='${q}'>
                                        <span class="glyphicon glyphicon-pencil"></span> 编辑
                                    </a>
                                    <a class="btn btn-danger btn-xs btn-delete" data-url="/question/delete?id=${q.id}">
                                        <span class="glyphicon glyphicon-trash"></span> 删除
                                    </a>
                                </td>
                            </tr>
                        </#list>
                        </tbody>
                    </table>
                    <!--分页-->
                    <#include "/common/page.ftl" >
                </div>
            </div>
        </section>
    </div>
    <#include "/common/footer.ftl" >
</div>

<div id="updateModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" action="/question/updateQuestion" method="post" id="updateFrom">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">题目编辑</h4>
                </div>
                <div class="modal-body">
                    <input name="qid" id="questionId" type="hidden">
                    <input name="qtype" id="questionType" type="hidden">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">题目问题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="qtitle" id="qtitle1" placeholder="请输入问题内容">
                        </div>
                    </div>
                    <div class="choiceQuestion" style="display: block;">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">选项A</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="selOne" id="selOne1" placeholder="请输入选项A内容">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">选项B</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="selTwo" id="selTwo1" placeholder="请输入选项B内容">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">选项C</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="selThree" id="selThree1" placeholder="请输入选项C内容">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">选项D</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="selFour" id="selFour1" placeholder="请输入选项D内容">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">答案</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="ans" id="ans1" placeholder="请输入选择题答案">
                            </div>
                            <label for="inputEmail3" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10"><span style="color: red;">(请勿更改题型,答案大写字母表示)</span></div>
                        </div>
                    </div>
                    <div class="judgeQuestion" style="display: none;">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">答案</label>
                            <div class="radio">
                                <label style="margin-left: 20px;"><input type="radio" name="jans" id="judge1" value="1"> 正确</label>
                                <label style="margin-left: 20px;"><input type="radio" name="jans" id="judge2"  value="0"> 错误</label>
                                <span style="color: red;margin-left: 20px;">(请选择正确答案)</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-updateQuestion">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".btn-update").click(function () {
            var json = $(this).data("json");
            console.log(json);
            $("#questionId").val(json.id);
            $("#qtitle1").val(json.title);
            $("#questionType").val(json.type);
            if(json.type == 3){
                if(json.judgeRight){
                    $("#judge1").prop("checked", true);
                }else {
                    $("#judge2").prop("checked", true);
                }
                $(".choiceQuestion").hide();
                $(".judgeQuestion").show();
            }else{
                $("#selOne1").val(json.questionItems[0].title);
                $("#selTwo1").val(json.questionItems[1].title);
                $("#selThree1").val(json.questionItems[2].title);
                $("#selFour1").val(json.questionItems[3].title);
                $("#ans1").val(json.ans);
                $(".choiceQuestion").show();
                $(".judgeQuestion").hide();
            }
            $("#updateModal").modal("show");
        });
    });
    $(".btn-updateQuestion").click(function () {
        $("#updateFrom").ajaxSubmit(function (data) {
            console.log(data);
            window.location.reload();
        });
    });
</script>

<div id="insertModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" action="/question/insertQuestion" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h6 class="modal-title">该方式只支持单条录入试题,多条录入请选择批量导入方式</h6>
                </div>
                <div class="modal-body">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="radio">
                                <label style="margin-right: 30px;">选择新增的试题类型 : </label>
                                <label><input type="radio" name="chooseType" value="1" checked> 单选/多选题</label>
                                <label style="margin-left: 20px;"><input type="radio" name="chooseType" value="0"> 判断题</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">题目问题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="qtitle" id="qtitle" placeholder="请输入问题内容">
                        </div>
                    </div>
                    <div class="choiceQuestion" style="display: block;">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">选项A</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="selOne" id="selOne" placeholder="请输入选项A内容">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">选项B</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="selTwo" id="selTwo" placeholder="请输入选项B内容">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">选项C</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="selThree" id="selThree" placeholder="请输入选项C内容">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">选项D</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="selFour" id="selFour" placeholder="请输入选项D内容">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">答案</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="ans" id="ans" placeholder="请输入选择题答案">
                            </div>
                            <label for="inputEmail3" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10"><span style="color: red;">(大写字母表示)</span></div>
                        </div>
                    </div>
                    <div class="judgeQuestion" style="display: none;">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">答案</label>
                            <div class="radio">
                                <label style="margin-left: 20px;"><input type="radio" name="jans" value="1" > 正确</label>
                                <label style="margin-left: 20px;"><input type="radio" name="jans" value="0"> 错误</label>
                                <span style="color: red;margin-left: 20px;">(请选择正确答案)</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-saveQuestion">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".btn-insert").click(function () {
            $("#insertModal").modal("show");
        });
        $("input[name=chooseType]").click(function () {
            var chooseType = $(this).val();
            if(chooseType == 1){
                $(".choiceQuestion").show();
                $(".judgeQuestion").hide();
            }else{
                $(".choiceQuestion").hide();
                $(".judgeQuestion").show();
            }
        });
        $('.btn-saveQuestion').click(function () {
            var param = {
                "chooseType":$("input[name=chooseType]").prop("checked"),
                "qtitle":$("#qtitle").val(),
                "selOne":$("#selOne").val(),
                "selTwo":$("#selTwo").val(),
                "selThree":$("#selThree").val(),
                "selFour":$("#selFour").val(),
                "ans":$("#ans").val(),
                "jans":$("input[name=jans]").prop("checked")
            };
            $.post("/question/insertQuestion", param, function (data) {
                if(data.success){
                    Swal.fire({
                        title: "添加成功",
                        icon: 'success',
                    });
                    window.location.reload();
                }
            });
        });
    });
</script>

<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">导入</h4>
            </div>
            <form class="form-horizontal" action="/question/importXls" enctype="multipart/form-data" method="post" id="importForm">
                <div class="modal-body">
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="name" class="col-sm-3 control-label"></label>
                        <div class="col-sm-6">
                            <input type="file" name="file"/>
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 10px;">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-6">
                            <a href="/templates/examTemplates.xls" class="btn btn-success" >
                                <span class="glyphicon glyphicon-download"></span> 下载模板
                            </a>
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 10px;">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-9">
                            <span style="color: red;">请按照模板在第一页录入单选题/多选题,第二页录入判断题</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary btn-submit">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".btn-import").click(function () {
            $("#importModal").modal("show");
        });
    });
</script>

<div id="outputModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" action="/question/exportXls" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <div class="panel panel-default">
                        <div class="panel-heading" id="title">请选择导出的试题类型?</div>
                        <div class="checkbox" id="checkboxAll">
                            <label style="margin: 20px;"><input type="checkbox" id="clickAll" onclick="checkAll(this);"> 全选</label>
                            <label style="margin: 20px;"><input type="checkbox" name="type" value="1"> 单选题</label>
                            <label style="margin: 20px;"><input type="checkbox" name="type" value="2"> 多选题</label>
                            <label style="margin: 20px;"><input type="checkbox" name="type" value="3"> 判断题</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-exportXls">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".btn-output").click(function () {
            $("#outputModal").modal("show");
        });
        var isCheck = $("input[name=type]");
        isCheck.click(function () {
            var is = true;
            isCheck.each(function (index, ele) {
                if(!$(ele).prop("checked")){
                    is = false;
                }
            });
            $("#clickAll").prop("checked", is);
        });

        $(".btn-exportXls").click(function () {
            var typeArr = [];
            $("input[name=type]").each(function (index, ele) {
                if($(ele).prop("checked")){
                    typeArr.push($(ele).val());
                }
            });
            console.log(typeArr);
            Swal.fire({
                title: "确定导出选中的试题吗?",
                text: "请注意保密试题内容!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.value) {
                    window.location.href = "/question/exportXls?typeArr=" +  typeArr;
                    $("#outputModal").modal("hide");
                }
            });
        });
    });

    function checkAll(e) {
        $("#checkboxAll  input").prop("checked", $(e).prop("checked"));
    }
</script>

<div id="showModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" action="" method="post">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">题目详情</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-heading" id="titleQuestion"></div>
                    <ul class="list-group" id="details">

                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".btn-show").click(function () {
            var json = $(this).data("json");
            $("#titleQuestion").html(json.title);
            if(json.type == 3){
                var str = json.judgeRight ? "<span style='color: red;'>正确</span>" : "错误";
                $("#details").html('<li class="list-group-item">'+ str +'</li>');
            }else{
                $("#details").empty();
                $.post("/question/queryItem", "qid=" + json.id, function (data) {
                    $(data).each(function (index, ele) {
                        var str = '<li class="list-group-item">';
                        if(ele.judgeRight){
                            str += '<span class="badge" style="background-color: red;">';
                            str += '√';
                        }else{
                            str += '<span class="badge">';
                            str += '×';
                        }
                        str += '</span>' + ele.title;
                        str +=  '</li>';
                        $("#details").append(str);
                    });
                });
            }
            $("#showModal").modal("show");
        });
    });
</script>
</body>
</html>
